<template>
  <div class="p-2">
    <el-card shadow="hover">
      <template #header>
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px" style="height:45px;">
          <!-- <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="权限字符" prop="roleKey">
            <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 240px">
              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" style="width: 308px">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
            ></el-date-picker>
          </el-form-item> -->

          <!-- <el-form-item>
            <el-button type="primary" @click="handleQuery" icon="Search">搜索</el-button>
            <el-button @click="resetQuery" icon="Refresh">重置</el-button>
          </el-form-item> -->

          <el-form-item style="float:right;">
            <el-button type="primary" plain icon="Plus">新增来件</el-button>
            <el-button type="warning" plain icon="Download">导出台账</el-button>
            <!-- <el-button type="primary" plain @click="handleAdd()" icon="Plus" v-hasPermi="['system:role:add']">新增</el-button>
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:role:export']">导出</el-button> -->
          </el-form-item>
        </el-form>
      </template>

      <!-- :show-overflow-tooltip="true" -->
      <el-table ref="roleTableRef" v-loading="loading" :data="emailList" @selection-change="handleSelectionChange">
        <el-table-column label="序号" type="index" align="center" width="50">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务类型" prop="roleId" />
        <el-table-column label="支队交办日期" prop="roleName" />
        <el-table-column label="交办单位" prop="roleKey" />
        <el-table-column label="对方来件日期" prop="roleSort" />
        <el-table-column label="镇/街道" prop="roleSort" />
        <el-table-column label="工单编号" prop="roleSort" />
        <el-table-column label="信访人名称" prop="roleSort" />
        <el-table-column label="待处理主体名称" prop="roleSort" />
        <el-table-column label="诉求或者项目主要概况" prop="roleSort" />
        <el-table-column label="收件办理情况" prop="roleSort" />
        <el-table-column label="来源" prop="roleSort" />
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="大队交办日期" prop="roleSort" />
        <el-table-column label="检查人员" prop="roleSort" />
        <el-table-column label="备注" prop="remark" />
        <!-- <el-table-column label="创建时间" align="center" prop="createTime">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column> -->

        <el-table-column fixed="right" label="操作" width="80">
          <template #default="scope">
            <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
              <el-button link type="primary" icon="Edit" ></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
              <el-button link type="primary" icon="Delete" ></el-button>
            </el-tooltip>
            <!-- <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup name="Xftsjb" lang="ts">
import { listTable } from '@/api/ljxsbl/xftsjb/index';

const emailList = ref([]);
const loading = ref(false)
const total = ref(0)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    roleName: '',
    roleKey: '',
    status: '',
  },
  rules: {
    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
  }
})
const { queryParams, rules } = toRefs(data)

/**
 * 查询列表
 */
 const getList = () => {
  loading.value = true
  listTable(proxy?.addDateRange(queryParams.value, dateRange.value)).then(res => {
    emailList.value = res.rows
    total.value = res.total
    loading.value = false
  })
}

onMounted(() => {
  // getList();
});
</script>

<style scoped lang="scss">
</style>
